<template>
  <AddEditNote
    :isEditPage="true"
    bgColor="link"
    v-model="note"
    placeholder="请输入新的事项内容..."
  >
    <button
      class="button is-link mr-3"
      @click="handleCancelClick"
    >
      取消
    </button>
    <button
      class="button is-link is-light"
      @click="handleSaveClick"
    >
      保存
    </button>
  </AddEditNote>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import AddEditNote from '@/components/Notes/AddEditNote.vue';
export default {
  props: ['id'],

  components: {
    AddEditNote
  },

  data() {
    return {
      note: ''
    }
  },

  computed: {
    ...mapState(['notes'])
  },

  created() {
    const note = this.notes.find(note => note.id === this.id)
    this.note = note.content
  },

  methods: {
    ...mapMutations(['saveNote']),

    handleSaveClick() {
      this.saveNote({
        id: this.id, 
        note: this.note
      })
      this.$router.back()
    },

    handleCancelClick() {
      this.$router.back()
    }
  }

}
</script>